<template>
  <el-dialog v-model="isShow" draggable :width="720" :close-on-click-modal="false">
    <template #header>
      {{ data.title }}
    </template>
    <el-form :model="data">
      <div class="form-item-row">
        <el-form-item label="主板型号" :label-width="sLabel[0]">
          <el-input
            v-model="data.model"
            :disabled="data.flag == 'del'"
            style="width: 300px;"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <!-- <el-tag
            :type="data.status == cStatus[0] ? 'success' : 'danger'"
            style="margin: 0 5px"
            >{{ data.status }}</el-tag
          > -->
        </el-form-item>
      </div>
      <div class="form-item-row">
        <el-form-item label="主板厂商" :label-width="sLabel[0]">
          <el-select
            v-model="factoryValue"
            filterable
            remote
            reserve-keyword
            placeholder="输入主板厂商关键字查询"
            remote-show-suffix
            @click="getFactory('')"
            :remote-method="getFactory"
            :loading="loading"
            @change="factoryChange"
            :disabled="data.flag == 'del'"
          >
            <el-option
              v-for="item in factoryOptions"
              :key="item.Id"
              :label="item.factory"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="form-item-row" v-if="data.dtCreate != ''">
        <el-form-item label="创建时间" :label-width="sLabel[0]">
          <span class="label">{{ data.dtCreate }}</span>
        </el-form-item>
        <el-form-item label="操作员" :label-width="sLabel[1]">
          <span class="label">{{ data.operCreate }}</span>
        </el-form-item>
      </div>
      <div class="form-item-row" v-if="data.dtUpdate != ''">
        <el-form-item label="修改时间" :label-width="sLabel[0]">
          <span class="label">{{ data.dtUpdate }}</span>
        </el-form-item>
        <el-form-item label="操作员" :label-width="sLabel[1]">
          <span class="label">{{ data.operUpdate }}</span>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <div>
        <el-button @click="close()">取 消</el-button>
        <el-button v-if="data.flag == 'del'" type="danger" @click="msgBox('status',data.status == cStatus[0]?'停用此主板信息':'取消停用')">{{
          data.status == cStatus[0] ? "停 用" : "取消停用"
        }}</el-button>
        <el-button v-else type="primary" @click="done()" :loading="loading">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { getCurrentInstance, reactive, ref } from "vue-demi";
import http from "@/axios/http";
import util from "@/assets/js/util";
import { ElMessageBox, ElNotification } from "element-plus";
import mqtt from '@/assets/js/mqtt';
export default {
  setup(props, ctx) {
    const Global = getCurrentInstance().proxy
    let user = reactive({
      id: Global.$var.user.id,
      username: Global.$var.user.username,
      power: Global.$var.user.power,
    });

    function mqttOnMsg() {
      mqtt.onMsg((t,m)=>{
        loading.value = false
        let r = JSON.parse(m)
        if (r.data.returnCode == 10000) {
          let d = r.data.data
          if (r.msgType == 140 || r.msgType == 142) {
            // console.log(d)
            ctx.emit("done", d);
            isShow.value = false;
          }
          if (r.msgType == 135) {
            factoryOptions.value = d
          }
        }
      })
    }

    let cStatus = ref(Global.$const.STATUS_DATA);
    let sLabel = ref(["150px", "80px", "450px"]);
    let isShow = ref(false);
    let data = reactive({
      flag: "",
      title: "",
      id: "",
      factory: "",
      model: "",
      status: 0,
      dtCreate: "",
      operCreate: "",
      dtUpdate: "",
      operUpdate: "",
    });
    let loading = ref(false)
    function open(d) {
      mqttOnMsg()
    //console.log(d)
      data.flag = d.flag;
      if (d.flag == "add") {
        data.title = "新建主板信息";
        data.id = "";
        data.factory = "";
        factoryValue.value = "";
        data.model = "";
        data.status = 0;
        // data.dtCreate = "";
        // data.operCreate = "";
        // data.dtUpdate = "";
        // data.operUpdate = "";
      } else {
        data.title = d.flag == "del" ? "主板信息状态" : "编辑主板信息";
        data.id = d.Id;
        data.factory = d.factory;
        factoryValue.value = d.factory.factory;
        data.model = d.model;
        data.status = d.status;
        // data.dtCreate = d.dtCreate;
        // data.operCreate = d.operCreate;
        // data.dtUpdate = d.dtUpdate;
        // data.operUpdate = d.operUpdate;
      }
      isShow.value = true;
    }
    function close() {
      isShow.value = false;
    }
    function done() {
      let err = ''
      if (util.isNull(data.model)) err = '主板型号不能为空'
      else if (util.isNull(data.factory)) err = '主板厂商不能为空'
      if (!util.isNull(err)) {
        ElNotification({
            type: 'warning',
            duration: 1500,
            title: '',
            message: err
          })
        return
      }
      loading.value = true
      if (data.flag == "add" || data.flag == "edit") {
        let msgCode = 140
        if (data.flag == "edit") msgCode = 142
        let topic = mqtt.TOPIC_REQ+msgCode
        let p = {}
        p.msgType = msgCode
        p.clientId = user.id
        p.userName = user.username
        let m = {}
        if (data.flag == "edit") m.Id = data.id
        m.model = data.model
        m.factory_id = data.factory.Id
        m.status = data.status
        p.message = {}
        p.message.board = JSON.stringify(m)
      //console.log(JSON.stringify(p))
        mqtt.publish(topic,JSON.stringify(p))
      }
      if (data.flag == "del") {
        let s = cStatus.value;
        data.status = data.status == s[0] ? s[1] : s[0];
      }
    }
    // 确认msgBox
    function msgBox(flag,msg,title='是否确认？',cbt='确认') {
      ElMessageBox.confirm(msg, title, {
        confirmButtonText: cbt,
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (flag == 'status') done()
        })
        .catch(() => {});
    }
    // 查询主板厂商
    let factoryValue = ref("")
    let factoryOptions = ref([])
    function getFactory(query) {
      // if (!util.isNull(query)) {
        let msgCode = 135
        let topic = mqtt.TOPIC_REQ+msgCode
        let g = {}
        g.msgType = msgCode
        g.clientId = user.id
        g.userName = user.username
        let m = {}
        m.factory = query
        m.contact = ''
        m.phone = ''
        m.status = ''
        m.indexPage = 1
        m.pageSize = 10
        g.message = m
        mqtt.publish(topic,JSON.stringify(g))
      // } else {
      //   factoryOptions.value = []
      // }
    }
    function factoryChange(e) {
    //console.log(e)
      let fo = factoryOptions.value
      for (let i in fo)
      if (e == fo[i].Id) {
        data.factory = fo[i]
      }
    }

    function isNull(v) {
      return util.isNull(v)
    }

    return {
      user,cStatus,sLabel,isShow,data,loading,open,close,done,msgBox,factoryValue,factoryOptions,getFactory,factoryChange,
      isNull
    };
  },
};
</script>

<style lang="scss" scoped>
.form-item-row {
  display: flex;
  flex-direction: row;
  .label {
    background-color: $color-primary-away;
    // border: 1px solid $color-primary-light;
    padding: 0px 15px;
    border-radius: 1px;
  }
}
.rom-version{
  .item{
    display: flex;
    flex-direction: row;
    .code{
      width: 100px;
      margin-top: 5px;
      margin-right: 5px;
      cursor: pointer;
    }
    .name{
      width: 200px;
      margin-top: 5px;
      margin-right: 5px;
      .el-text{
        width: 180px;
      }
    }
    .btn{
      margin-top: 5px;
      margin-left: 5px;
    }
  }
}
</style>